<template>
	<div class="container">
		<div class="content">
			<el-input v-model="input1" style="width: 640px; margin-right: 20px" size="large" placeholder="输入关键字" />
			<el-button type="primary" @click="addTitle">新增</el-button>
			<el-button type="success" @click="delAlls">批量删除</el-button>
			<el-button type="primary" @click="find">搜索</el-button>
			<!-- <el-button type="info" @click="">批量发布</el-button> -->
			<div class="table">
				<el-table :data="tableData" style="width: 100%; margin-top: 20px" height="450" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column fixed prop="title" label="标题" width="250" />
					<el-table-column prop="title_img" label="公告图片" width="220">
						<template v-slot:default="scope">
							<el-image :src="scope.row.title_img" />
						</template>
					</el-table-column>
					<el-table-column prop="title_content" label="公告内容" width="220" />
					<el-table-column prop="title_time" label="公告时间" width="220" />
					<el-table-column prop="title_state" label="公告状态" width="220">
						<template v-slot:default="scope">
							<el-tag type="success" v-if="scope.row.title_state === 1">已发布</el-tag>
							<el-tag type="danger" v-else>草稿</el-tag>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="220">
						<template v-slot:default="scope">
							<div v-if="scope.row.title_state === 1">
								<el-button link type="primary" size="small" @click="handleDel(scope.row.title_id)">删除</el-button>
								<el-button link type="primary" size="small" @click="edit(scope.row.title_id)">修改</el-button>
							</div>
							<div v-else>
								<el-button link type="primary" size="small" @click="handleDel(scope.row.title_id)">删除</el-button>
								<el-button link type="primary" size="small" @click="edit(scope.row.title_id)">修改</el-button>
								<el-button link type="primary" size="small" @click="handleFa(scope.row.title_id)">发布</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" :title="titleName" width="500px" destroy-on-close>
			<el-form :model="form" :rules="rules">
				<el-form-item label="标题" :label-width="formLabelWidth" prop="title">
					<el-input v-model="form.title" autocomplete="off" style="width: 250px" />
				</el-form-item>
				<el-form-item label="内容" :label-width="formLabelWidth" prop="content">
					<el-input v-model="form.content" autocomplete="off" style="width: 250px" row="4" type="textarea" />
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth" prop="state">
					<el-select v-model="form.state" placeholder="状态" style="width: 250px" clearable>
						<el-option label="发布" :value="1" />
						<el-option label="草稿" :value="0" />
					</el-select>
				</el-form-item>

				<el-form-item label="图片" :label-width="formLabelWidth">
					<div class="upLoad" style="width: 28%">
						<el-upload
							action="http://localhost:3005/api/upload"
							list-type="picture-card"
							:auto-upload="true"
							:limit="1"
							name="img"
							:on-success="changeSuccess"
						>
							<p>
								<el-icon><Plus /></el-icon>
							</p>
							<template #file="{ file }">
								<div>
									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
											<el-icon><zoom-in /></el-icon>
										</span>
										<!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
												<el-icon><Download /></el-icon>
											</span> -->
										<!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
												<el-icon><Delete /></el-icon>
											</span> -->
									</span>
								</div>
							</template>
						</el-upload>

						<el-dialog v-model="dialogVisibles">
							<img w-full :src="imgUrl" alt="Preview Image" style="width: 100%; height: 100%" />
						</el-dialog>
					</div>
				</el-form-item>
				<el-form-item style="margin-left: 300px">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button v-if="isChange" type="primary" @click="onSubmit">保存</el-button>
					<el-button v-else type="primary" @click="EditSubmit">修改</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup name="directives">
import { Search } from "@element-plus/icons-vue";
import { getTitle, DelTitle, InsertTitle, DelAll, Fabu, SelectTitle, EdidTitle } from "@/api/admin/home";
import { onMounted, ref, reactive, watch, nextTick } from "vue";
const formLabelWidth = "100px";
const dialogVisible = ref(false);
const delInfo = ref([]);
const input1 = ref("");
const titleName = ref("新增公告");
const tableData = ref([]);
// 显示修改或保存
const isChange = ref(true);
// 公告id
const titleId = ref("");
const form = reactive({
	title: "",
	content: "",
	state: ""
});
watch(
	titleName,
	(newVal, oldVal) => {
		// nextTick()
		if (newVal === "新增公告") {
			if (!form) return;
			form.title = "";
			form.content = "";
			form.state = "";
		}
	},
	{ immediate: true }
);
const getTitles = async () => {
	try {
		const res = await getTitle();
		if (res.data.code === 200) {
			tableData.value = [...res.data.data];
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 删除
const handleDel = async id => {
	try {
		const res = await DelTitle({ id });
		if (res.data.code === 200) {
			// await getTitle()
			setTimeout(() => {
				getTitles();
			}, 1500);
			ElNotification({
				message: "删除成功 ",
				type: "success",
				duration: 1000
			});
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 规则
const rules = reactive({
	title: [{ required: true }],
	content: [{ required: true }],
	state: [{ required: true }]
	// sex: [{ required: true }]
	// img:[{required:true}]
});

// 多选
const handleSelectionChange = val => {
	delInfo.value = val;
	// console.log(val);
};
// 增加
const addTitle = () => {
	titleName.value = "新增公告";
	dialogVisible.value = true;
};
// 图片上传
const dialogVisibles = ref(false);
const dialogImageUrl = ref("");
const disabled = ref(false);
const imgUrl = ref("");
const changeSuccess = response => {
	const { code, url } = response;
	if (code === 200) {
		imgUrl.value = url;
		ElNotification({
			message: "图片上传成功 ",
			type: "success",
			duration: 2000
		});
	} else {
		ElNotification({
			message: "图片上传失败 ",
			type: "error",
			duration: 1000
		});
	}
};
const handlePictureCardPreview = file => {
	dialogImageUrl.value = !imgUrl.value;
	dialogVisibles.value = true;
};
// 移出
const handleRemove = file => {
	console.log(file);
};
const onSubmit = async () => {
	form.img = imgUrl.value;
	try {
		const res = await InsertTitle(form);
		if (res.data.code === 200) {
			setTimeout(() => {
				getTitles();
			}, 1500);
			dialogVisible.value = false;
			ElNotification({
				message: "保存成功 ",
				type: "success",
				duration: 1000
			});
		} else {
			ElNotification({
				message: "保存失败 ",
				type: "error",
				duration: 1000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 批量删除titleNam
const delAlls = async () => {
	let arr = delInfo.value.map(it => it.title_id);
	if (!arr.length) {
		ElNotification({
			message: "未选中数据 ",
			type: "error",
			duration: 2000
		});
		return;
	}
	try {
		const res = await DelAll([...arr]);
		if (res.data.code === 200) {
			// await getTitle()
			setTimeout(() => {
				getTitles();
			}, 1500);
			ElNotification({
				message: "删除成功 ",
				type: "success",
				duration: 1000
			});
		} else {
			ElNotification({
				message: "删除失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 发布
const handleFa = async id => {
	try {
		const res = await Fabu(id);
		if (res.data.code === 200) {
			// await getTitle()
			setTimeout(() => {
				getTitles();
			}, 1500);
			ElNotification({
				message: "发布成功 ",
				type: "success",
				duration: 1000
			});
		} else {
			ElNotification({
				message: "发布失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 修改
const edit = async id => {
	titleId.value = id;
	dialogVisible.value = true;
	const res = await SelectTitle(id);
	if (res.data.code === 200) {
		titleName.value = "编辑公告";
		form.title = res.data.data[0].title;
		form.content = res.data.data[0].title_content;
		form.state = res.data.data[0].title_state;
		isChange.value = false;
	}
};
// 修改数据
const EditSubmit = async () => {
	form.img = imgUrl.value;
	let obj = {
		title: form.title,
		content: form.content,
		img: form.img,
		state: form.state,
		id: titleId.value
	};

	try {
		const res = await EdidTitle(obj);
		if (res.data.code === 200) {
			setTimeout(() => {
				getTitles();
			}, 1500);
			dialogVisible.value = false;
			ElNotification({
				message: "更改成功 ",
				type: "success",
				duration: 1000
			});
		} else {
			ElNotification({
				message: "更改失败 ",
				type: "error",
				duration: 1000
			});
		}
	} catch (error) {
		console.log(error);
	}
	// console.log(titleId.value,form.title,form.img)
};
// 查找
const find = async () => {
	if (!input1.value) {
		getTitles();
	}
	let arr = [];
	tableData.value.forEach(it=>{
		if(it.title.includes(input1.value) || it.title_content.includes(input1.value)){
			arr.push(it);
		}
	});
	if(arr.length > 0){
		tableData.value = arr;
		ElNotification({
				message: "搜索成功 ",
				type: "success",
				duration: 1000
			});
	}else{
		tableData.value = [];
	}
};
onMounted(() => {
	getTitles();
});
</script>

<style scoped lang="scss">
.container {
	width: 100%;

	display: flex;
	justify-content: center;
	.content {
		width: 95%;
		margin: 20px;
	}
}
</style>
